<template>
  <div class="filter-container">
    <el-button
      type="primary"
      @click="addFilter"
      class="add-btn"
    >
      <el-icon> <Plus /> </el-icon>添加筛选条件
    </el-button>

    <div
      class="filters-wrapper"
      v-if="filters.length > 0"
    >
      <!-- 连接线和切换按钮 -->
      <div
        class="connection-container"
        v-if="filters.length >= 2"
      >
        <div class="connection-line"></div>
        <div class="relation-toggle">
          <el-button
            circle
            @click="toggleRelation"
            :class="{ 'or-mode': relation === '或' }"
          >
            {{ relation }}
          </el-button>
        </div>
      </div>

      <!-- 筛选条件列表 -->
      <div class="filters-list">
        <div
          v-for="(filter, index) in filters"
          :key="filter.id"
          class="filter-item"
        >
          <!-- 条件内容 -->
          <div class="filter-content">
            <div>
              <el-select
                v-model="filter.field"
                placeholder="请选择字段"
                class="field-select"
              >
                <el-option
                  label="张飞"
                  value="张飞"
                ></el-option>
                <el-option
                  label="关羽"
                  value="关羽"
                ></el-option>
                <el-option
                  label="刘备"
                  value="刘备"
                ></el-option>
              </el-select>
              <el-select
                v-model="filter.operator"
                placeholder="请选择操作符"
                class="operator-select"
              >
                <el-option
                  label="等于"
                  value="等于"
                ></el-option>
                <el-option
                  label="小于"
                  value="小于"
                ></el-option>
                <el-option
                  label="大于"
                  value="大于"
                ></el-option>
              </el-select>
              <el-select
                v-model="filter.value"
                placeholder="请选择值"
                class="value-select"
              >
                <el-option
                  v-for="num in 15"
                  :key="num"
                  :label="num.toString()"
                  :value="num"
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-button
                circle
                class="delete-btn"
                @click="removeFilter(index)"
              >
                <el-icon>
                  <Close />
                </el-icon>
              </el-button>
              <el-button
                circle
                class="delete-btn"
                @click="addFilter2(index)"
              >
                <el-icon>
                  <Plus />
                </el-icon>
              </el-button>
            </div>
          </div>
          <!-- 二级筛选 -->
          <div
            class="filters-wrapper2"
            v-if="filter.children.length > 0"
          >
            <!-- 连接线和切换按钮 -->
            <div
              class="connection-container2"
              v-if="filter.children.length >= 2"
            >
              <div class="connection-line2"></div>
              <div class="relation-toggle2">
                <el-button
                  circle
                  @click="toggleRelation"
                  :class="{ 'or-mode': relation === '或' }"
                >
                  {{ relation }}
                </el-button>
              </div>
            </div>
            <!-- 二级筛选条件列表 -->
            <div class="filters-list2">
              <div
                v-for="(filter1, index1) in filter.children"
                :key="index1"
                class="filter-item2"
              >
                <!-- 条件内容 -->
                <div class="filter-content2">
                  <el-select
                    v-model="filter1.field"
                    placeholder="请选择字段"
                    class="field-select2"
                  >
                    <el-option
                      label="张飞"
                      value="张飞"
                    ></el-option>
                    <el-option
                      label="关羽"
                      value="关羽"
                    ></el-option>
                    <el-option
                      label="刘备"
                      value="刘备"
                    ></el-option>
                  </el-select>

                  <el-select
                    v-model="filter1.operator"
                    placeholder="请选择操作符"
                    class="operator-select2"
                  >
                    <el-option
                      label="等于"
                      value="等于"
                    ></el-option>
                    <el-option
                      label="小于"
                      value="小于"
                    ></el-option>
                    <el-option
                      label="大于"
                      value="大于"
                    ></el-option>
                  </el-select>

                  <el-select
                    v-model="filter1.value"
                    placeholder="请选择值"
                    class="value-select2"
                  >
                    <el-option
                      v-for="num in 15"
                      :key="num"
                      :label="num.toString()"
                      :value="num"
                    ></el-option>
                  </el-select>

                  <el-button
                    circle
                    class="delete-btn2"
                    @click="removeFilter1(index, index1)"
                  >
                    <el-icon>
                      <Close />
                    </el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElButton, ElSelect, ElOption, ElIcon } from "element-plus";
import { Plus, Close } from "@element-plus/icons-vue";

// 筛选条件关系（且/或）
const relation = ref("且");

// 筛选条件列表
const filters = reactive([]);
//二级筛选条件
const filters2 = reactive([]);

// 添加筛选条件
const addFilter = () => {
  filters.push({
    id: Date.now() + Math.random(),
    field: "",
    operator: "",
    value: null,
    children: [],
  });
};
//添加二级筛选
const addFilter2 = (index) => {
  // filters.splice(index, 1)
  filters[index].children.push({
    id: Date.now() + Math.random(),
    field: "",
    operator: "",
    value: null,
  });
};

// 删除筛选条件
const removeFilter = (index) => {
  filters.splice(index, 1);
};

//二级筛选删除
const removeFilter1 = (index, index1) => {
  console.log("第一层移除1", index);
  console.log("第二层移除2", index1);
  filters[index].children.splice(index1, 1);
};

// 切换关系（且/或）
const toggleRelation = () => {
  relation.value = relation.value === "且" ? "或" : "且";
};
</script>

<style scoped>
.filter-container {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
}

.add-btn {
  margin-bottom: 20px;
}

.filters-wrapper {
  position: relative;
  width: 100%;
  height: auto;
}
.connection-container {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.connection-line {
  position: absolute;
  left: 15px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background-color: #409eff;
}

/* 使用伪元素实现延长线 */
.connection-line::before,
.connection-line::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #409eff;
}

.connection-line::before {
  top: 0;
}

.connection-line::after {
  bottom: 0;
}

.relation-toggle {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.relation-toggle button {
  width: 32px;
  height: 32px;
  font-weight: bold;
  font-size: 14px;
}

.relation-toggle .or-mode {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}

.filters-list {
  margin-left: 50px;
  position: relative;
  z-index: 2;
}

.filter-item {
  /* display: flex; */
  /* align-items: flex-start; */
  display: inline-block;
  margin-bottom: 15px;
  position: relative;
  width: 100%;
}

.filter-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 10px;
  flex: 1;
  flex-wrap: wrap; */
  width: 100%;
  position: relative;
  float: left;
}

.field-select,
.operator-select {
  width: 120px;
}

.value-select {
  width: 100px;
}

.delete-btn {
  margin-left: 10px;
}

/* 二级 */
.filters-wrapper2 {
  position: relative;
  float: left;
  width: 100%;
}

.connection-container2 {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.connection-line2 {
  position: absolute;
  left: 15px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background-color: #409eff;
}

/* 使用伪元素实现延长线 */
.connection-line2::before,
.connection-line2::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #409eff;
}

.connection-line2::before {
  top: 0;
}

.connection-line2::after {
  bottom: 0;
}

.relation-toggle2 {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.relation-toggle2 button {
  width: 32px;
  height: 32px;
  font-weight: bold;
  font-size: 14px;
}

.relation-toggle2 .or-mode {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}

.filters-list2 {
  margin-left: 50px;
  position: relative;
  z-index: 2;
}

.filter-item2 {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  position: relative;
  width: 100%;
}

.filter-content2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
  width: 100%;
}

.field-select2,
.operator-select2 {
  width: 120px;
}

.value-select2 {
  width: 100px;
}

.delete-btn2 {
  margin-left: 10px;
}

/* 响应式设计 */
/* @media (max-width: 768px) {
  .filter-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .filters-list {
    margin-left: 30px;
  }

  .connection-container {
    left: 10px;
    width: 20px;
  }

  .connection-line {
    left: 10px;
  }

  .relation-toggle {
    left: 10px;
  }
} */
</style>
